<template>
  <div>
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>
          <i class="el-icon-lx-group"></i> 审核提现
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="container">
      <div class="handle-box">
        <el-input v-model="search" placeholder="邮箱" class="handle-input mr10" width="55"></el-input>
        <el-button type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
        <el-button type="primary" icon="el-icon-lx-friendadd" @click="showExport = true">导出</el-button>
      </div>
      <el-table :data="tableData" border class="table" ref="multipleTable" header-cell-class-name="table-header">
        <el-table-column prop="mobile" label="手机号"></el-table-column>
        <el-table-column prop="loginName" label="登录用户名"></el-table-column>
        <el-table-column prop="deductMoney" label="手续费"></el-table-column>
        <el-table-column prop="receivedMoney" label="实到金额"></el-table-column>
        <el-table-column prop="withdrawMoney" label="提现金额"></el-table-column>

        <el-table-column label="链地址收款凭证">
          <template #default="scope">
            <el-image class="table-td-thumb" :src="scope.row.chain" @click="open(scope.row.chain)"></el-image>
          </template>
        </el-table-column>
        <el-table-column label="类别">
          <template #default="scope">
            <el-tag v-if="scope.row.statement == '1'">支付宝</el-tag>
            <el-tag v-else-if="scope.row.statement == '2'">微信</el-tag>
            <el-tag v-else-if="scope.row.statement == '3'">银行卡</el-tag>
            <el-tag v-else>链地址</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="状态">
          <template #default="scope">
            <el-tag v-if="scope.row.status == '0'">未审核</el-tag>
            <el-tag v-else-if="scope.row.status == '1'">已通过</el-tag>
            <el-tag v-else>已拒绝</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="statusRemarks" label="审核备注(拒绝理由)"></el-table-column>
        <el-table-column prop="auditTime" label="审核时间" :formatter="dateFormat"></el-table-column>
        <el-table-column prop="createTime" label="创建时间" :formatter="dateFormat"></el-table-column>
        <el-table-column label="操作" width="180" align="center">
          <template #default="scope">
            <el-button type="text" icon="el-icon-delete" class="red"
              @click="handleDelete(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination background layout="total, prev, pager, next" :current-page="query.pageIndex"
          :page-size="query.pageSize" :total="pageTotal" @current-change="handlePageChange"></el-pagination>
      </div>
    </div>

    <!-- 导出框 -->
    <el-dialog title="创建用户" v-model="showExport" width="40%">
      <el-form ref="form" :model="eList" label-width="100px">
        <el-form-item label="创建时间范围">
          <el-date-picker v-model="etime" type="datetimerange" format="YYYY-MM-DD HH:mm:ss" range-separator="至"
            start-placeholder="开始日期" end-placeholder="结束日期">
          </el-date-picker>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="showExport = false">取 消</el-button>
          <el-button type="primary" @click="fcOrderUsesExport">确 定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { api } from "@/api/index";
import { formatDate } from "@/common/data";
import moment from "moment";
export default {
  inject: ["reload"],
  filters: {
    formatDate(time) {
      time = time * 1000;
      let date = new Date(time);
      console.log(new Date(time));
      return formatDate(date, "yyyy-MM-dd hh:mm");
    },
  },
  name: "basetable",
  data() {
    return {
      query: {
        pageNo: 1,
      },
      search: "",
      time: "",
      etime: "",
      tableData: [],
      showAddUser: false,
      showExport: false,
      pageTotal: 0,
      list: {},
      eList: {},
      isChange: "",
      data: "",
    };
  },
  created() {
    this.getData();
  },
  mounted() { },
  methods: {
    dateFormat: function (row, column) {
      var date = row[column.property];
      if (date == undefined) {
        return "";
      }
      return moment(date).format("YYYY-MM-DD HH:mm:ss");
    },

    // 获取分类列表
    getData() {
      console.log(this.time);
      api('/web/fcOrderUses/g', {
        email: this.search,
        mobile: "",
        limit: 10,
        orderNo: "",
        offset: this.query.pageNo,
      }).then((res) => {
        // console.log(res.data);
        this.tableData = res.data.rows;
        this.pageTotal = res.data.total;
      });
    },
    fcOrderUsesExport() {
      this.showExport = false;
      this.eList.startTime = formatDate(new Date(this.etime[0]), "yyyy-MM-dd");
      this.eList.endTime = formatDate(new Date(this.etime[1]), "yyyy-MM-dd");
      this.eList.mobile = "";
      api('/web/fcOrderUses/export', this.eList).then((res) => {
        const blob = new Blob([res]); // 创建blob对象
        console.log(blob);
        const fileName = "提现记录.xlsx";
        const elink = document.createElement("a"); // 创建的标签
        elink.download = fileName;
        elink.style.display = "none";
        elink.href = URL.createObjectURL(blob); // 创建url
        document.body.appendChild(elink); // 把 创建的标签追加到body里
        elink.click();
        URL.revokeObjectURL(elink.href); // 释放URL 对象
        document.body.removeChild(elink); // 移除标签
        this.$message({
          message: "导出成功！！！",
          type: "success",
        });
        this.$refs.multipleTable.clearSelection();
      });
    },
    // 触发搜索按钮
    handleSearch() {
      this.getData();
    },

    // 删除操作
    handleDelete(index, row) {
      // 二次确认删除
      let data = JSON.parse(JSON.stringify(row));
      this.$confirm("确定要删除吗？", "提示", {
        type: "warning",
      })
        .then(() => {
          api('/web/fcOrderUses/d', {
            id: data.id,
          }).then((res) => {
            if (res.code === 2000) {
              this.$message.success(res.message);
              this.reload();
            } else {
              this.$message.error(res.message);
            }
          });
        })
        .catch(() => { });
    },
    open(url) {
      this.$alert('<img class="bigwxpic" src="' + url + '" alt="">', {
        dangerouslyUseHTMLString: true,
        showConfirmButton: false,
      });
    },
    // 分页导航
    handlePageChange(val) {
      // console.log(val);
      this.query.pageNo = val;
      this.getData();
    },
  },
};
</script>

<style lang='scss' scoped>
.handle-box {
  margin-bottom: 20px;
}

.handle-select {
  width: 120px;
}

.handle-input {
  width: 300px;
  display: inline-block;
}

.table {
  width: 100%;
  font-size: 14px;
}

.red {
  color: #ff0000;
}

.mr10 {
  margin-right: 10px;
}

.table-td-thumb {
  display: block;
  margin: auto;
  width: 40px;
  height: 40px;
}
</style>
<style>
.bigwxpic {
  width: 100%;
}
</style>
